<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <meta name="theme-color" content="#317EFB">
    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport">
    <meta name="keywords" content="">
    <meta name="description" content="醒，亦在人间；梦，亦在人间。">
    <meta property="og:type" content="website">
    <meta property="og:title" content="白云苍狗">
    <meta property="og:url" content="https://www.imalun.com/index.html">
    <meta property="og:site_name" content="白云苍狗">
    <meta property="og:description" content="醒，亦在人间；梦，亦在人间。">
    <meta property="og:locale">
    <meta property="article:author" content="白云苍狗">
    <meta name="twitter:card" content="summary">
    <meta name="description" content="醒，亦在人间；梦，亦在人间。">
    <title>白云苍狗</title>
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=1.0.1">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=1.0.1">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1.0.1">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="preload" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.css">
    <link rel="stylesheet" href="/css/plugins/bootstrap.min.css">
    <link rel="stylesheet" href="/css/plugins/locomotive-scroll.css">
    <link rel="stylesheet" href="/css/plugins/swiper.min.css">
    <link rel="stylesheet" href="/css/plugins/fancybox.min.css">
    <link rel="stylesheet" href="/css/plugins/font-awesome.min.css">
    <link rel="stylesheet" href="/css/highlight.css">
    <link rel="stylesheet" href="/css/style-light.css?v=1.0.1" id="trm-switch-style">
    <script defer>
        var _hmt = _hmt || [];
        ! function() {
            var e = document.createElement("script");
            e.src = "https://hm.baidu.com/hm.js?bbad9d8e1fd8e044d365c2ce0d114c73";
            var t = document.getElementsByTagName("script")[0];
            t.parentNode.insertBefore(e, t)
        }()
    </script>
    <meta name="generator" content="Hexo 5.4.2">
    <link rel="alternate" href="/atom.xml" title="白云苍狗" type="application/atom+xml">
</head>

<body>
    <div class="trm-app-frame">
        <div class="trm-preloader">
            <div class="trm-holder">
                <div class="preloader">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="trm-mode-swich-animation-frame">
            <div class="trm-mode-swich-animation"><i class="far fa-sun"></i>
                <div class="trm-horizon"></div><i class="far fa-moon"></i></div>
        </div>
        <div id="trm-dynamic-content" class="trm-swup-animation">
            <div id="trm-scroll-container" class="trm-scroll-container" data-scroll-container style="opacity:0">
                <div data-scroll-section id="content" class="trm-scroll-section">
                    <div class="trm-top-bar" data-scroll data-scroll-sticky data-scroll-target="#content" data-scroll-offset="-10">
                        <div class="container">
                            <div class="trm-left-side">
                                <a href="/" class="trm-logo-frame trm-anima-link"><img src="/favicon-32x32.png" alt="logo">
                                    <div class="trm-logo-text">白云 <span>苍狗</span></div>
                                </a>
                            </div>
                            <div class="trm-right-side">
                                <div class="trm-menu">
                                    <nav>
                                        <ul>
                                            <li class="menu-item-has-children current-menu-item"><a href="/">首页</a></li>
                                            <li class="menu-item-has-children"><a href="/archives/">归档</a></li>
                                            <li class="menu-item-has-children"><a href="/links/">友链</a></li>
                                            <li class="menu-item-has-children"><a href="/comment/">树洞</a></li>
                                            <li class="menu-item-has-children"><a href="/about/">关于</a></li>
                                            <li class="menu-item-has-children"><a data-no-swup target="_blank" rel="noopener" href="https://foreverblog.cn/go.html">虫洞</a></li>
                                        </ul>
                                    </nav>
                                </div>
                                <div class="trm-mode-switcher-place"></div>
                            </div>
                            <div class="trm-menu-btn"><span></span></div>
                        </div>
                    </div>
                    <div class="trm-content-start">
                        <div class="trm-banner" data-scroll data-scroll-direction="vertical"><img src="https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c" alt="banner" class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-3">
                            <div class="trm-banner-content trm-overlay">
                                <div class="container" data-scroll data-scroll-direction="vertical" data-scroll-speed="0">
                                    <div class="row">
                                        <div class="col-lg-4"></div>
                                        <div class="col-lg-8">
                                            <div class="trm-banner-text">
                                                <div class="trm-label trm-mb-20">Hi my new friend!</div>
                                                <h1 class="trm-mb-30 trm-hsmb-font">树深时见鹿，<br>溪午不闻钟。</h1><a data-fancybox target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV18o4y1Z7Gb?t=6.2" class="trm-btn trm-btn-border">Video Resume <i class="fas fa-play"></i></a></div>
                                            <a
                                                href="#about-triger" data-scroll-to="#about-triger" data-scroll-offset="-130" class="trm-scroll-hint-frame">
                                                <div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="trm-main-card-frame trm-sidebar">
                                        <div class="trm-main-card" data-scroll data-scroll-repeat data-scroll-sticky data-scroll-target="#content" data-scroll-offset="60">
                                            <div class="trm-mc-header">
                                                <div class="trm-avatar-frame trm-mb-20"><img class="trm-avatar" src="https://www.imalun.com/images/avatar.jpg" alt="Avatar"></div>
                                                <h5 class="trm-name trm-mb-15">白云苍狗</h5>
                                                <div class="trm-label">I`m <span class="trm-typed-text"></span></div>
                                            </div>
                                            <div class="trm-divider trm-mb-40 trm-mt-40"></div>
                                            <div class="trm-social"><a href="https://github.com/MaLuns" rel="nofollow" target="_blank"><i class="fab fa-github"></i> </a><a href="https://gitee.com/ml13" rel="nofollow" target="_blank"><i class="iconfont cg-gitee"></i> </a><a href="https://weibo.com/u/5022481764"
                                                    rel="nofollow" target="_blank"><i class="iconfont cg-weibo"></i> </a><a href="/atom.xml" rel="nofollow" target="_blank"><i class="iconfont cg-rss"></i></a></div>
                                            <div class="trm-divider trm-mb-40 trm-mt-40"></div>
                                            <ul class="trm-table trm-mb-20">
                                                <li>
                                                    <div class="trm-label">Residence:</div>
                                                    <div class="trm-label trm-label-light">Mars</div>
                                                </li>
                                                <li>
                                                    <div class="trm-label">City:</div>
                                                    <div class="trm-label trm-label-light">WuHan</div>
                                                </li>
                                                <li>
                                                    <div class="trm-label">Age:</div>
                                                    <div class="trm-label trm-label-light">18</div>
                                                </li>
                                            </ul>
                                            <div class="trm-divider trm-mb-40 trm-mt-40"></div>
                                            <div class="text-center"><a href="mailto:admin@imalun.com" class="trm-btn">联系我 <i class="far fa-envelope"></i></a></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="trm-content" id="trm-content">
                                        <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="trm-blog-categories trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <h6>创作类 <span class="trm-number">4</span></h6>
                                                    <div class="trm-divider trm-mb-20 trm-mt-20"></div><a href="/categories/%E5%88%9B%E4%BD%9C%E7%B1%BB/." class="trm-label">查看分类 <i class="fas fa-arrow-right"></i></a></div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-categories trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <h6>记录类 <span class="trm-number">27</span></h6>
                                                    <div class="trm-divider trm-mb-20 trm-mt-20"></div><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/." class="trm-label">查看分类 <i class="fas fa-arrow-right"></i></a></div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <h5 class="trm-mb-40 trm-title-with-divider">最近发布 <span data-number="01"></span></h5>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/interview/" class="trm-cover-frame trm-anima-link"><img src="https://www.logosc.cn/uploads/resources/2018/11/28/1543395468_thumb.jpg" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/interview/" class="trm-anima-link">前端面试记录</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>04/13</li>
                                                            <li>05:24</li>
                                                            <li>1.9k</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/cloudbase_comment_two/" class="trm-cover-frame trm-anima-link"><img src="https://images.unsplash.com/photo-1640782625068-b317650f49b3?crop=entropy&cs=srgb&fm=jpg&ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDE3fHwlRTklQTMlOEUlRTYlOTklQUZ8ZW58MHx8fHwxNjQ5NjYwNzY0&ixlib=rb-1.2.1&q=85"
                                                            alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/cloudbase_comment_two/" class="trm-anima-link">关于重写评论插件这件事</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>02/11</li>
                                                            <li>10:28</li>
                                                            <li>973</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/vue_web_components/" class="trm-cover-frame trm-anima-link"><img src="https://images.unsplash.com/photo-1556075798-4825dfaaf498?ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDN8fHZ1ZXxlbnwwfHx8fDE2NDk2Njg5NzY&ixlib=rb-1.2.1&w=750&dpi=2" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/vue_web_components/" class="trm-anima-link">使用 Vue3 构建 Web Components</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>11/21</li>
                                                            <li>10:17</li>
                                                            <li>1.2k</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/renew_domains/" class="trm-cover-frame trm-anima-link"><img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDEwfHx3d3d8ZW58MHx8fHwxNjQ5NjY5MDY1&ixlib=rb-1.2.1&w=750&dpi=2" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/renew_domains/" class="trm-anima-link">续费域名了</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>11/09</li>
                                                            <li>07:29</li>
                                                            <li>69</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/video_yztx/" class="trm-cover-frame trm-anima-link"><img src="https://www.logosc.cn/uploads/resources/2018/11/26/1543210848_thumb.jpg" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E5%88%86%E4%BA%AB%E7%B1%BB/">分享类</a></div>
                                                        <h5><a href="/video_yztx/" class="trm-anima-link">朱雀云丹 · 风采铃</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>11/01</li>
                                                            <li>06:37</li>
                                                            <li>28</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/array_to_tree/" class="trm-cover-frame trm-anima-link"><img src="https://images.unsplash.com/photo-1522252234503-e356532cafd5?ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDd8fGNvZGV8ZW58MHx8fHwxNjQ5NjY5MTgw&ixlib=rb-1.2.1&w=750&dpi=2" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/array_to_tree/" class="trm-anima-link">前端数组转树形结构</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>10/28</li>
                                                            <li>08:08</li>
                                                            <li>654</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/github_action/" class="trm-cover-frame trm-anima-link"><img src="https://images.unsplash.com/photo-1630514969818-94aefc42ec47?ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDJ8fGdpdGh1YnxlbnwwfHx8fDE2NDk2NjkyMzQ&ixlib=rb-1.2.1&w=750&dpi=2" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/github_action/" class="trm-anima-link">利用 GitHub Actions + Github Pages 实现博客自动部署</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>09/26</li>
                                                            <li>09:08</li>
                                                            <li>1.2k</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/hexo_theme_text/" class="trm-cover-frame trm-anima-link"><img src="https://www.logosc.cn/uploads/resources/2018/11/06/1541488846_thumb.jpg" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E5%88%9B%E4%BD%9C%E7%B1%BB/">创作类</a></div>
                                                        <h5><a href="/hexo_theme_text/" class="trm-anima-link">hexo-theme-text 使用说明</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>09/25</li>
                                                            <li>11:13</li>
                                                            <li>868</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/generate_vue_docs/" class="trm-cover-frame trm-anima-link"><img src="https://www.logosc.cn/uploads/resources/2018/11/06/1541474216_thumb.jpg" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/generate_vue_docs/" class="trm-anima-link">打造自己的Vue组件文档生成工具</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>07/29</li>
                                                            <li>10:44</li>
                                                            <li>2.1k</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
                                                    <a href="/vscode_extension_two/" class="trm-cover-frame trm-anima-link"><img src="https://images.unsplash.com/photo-1590130382404-36dcbb666a3d?ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDEwfHx2c2NvZGV8ZW58MHx8fHwxNjQ5NjExMTYy&ixlib=rb-1.2.1&w=750&dpi=2" alt="cover"></a>
                                                    <div class="trm-card-descr">
                                                        <div class="trm-label trm-category trm-mb-20"><a href="/categories/%E8%AE%B0%E5%BD%95%E7%B1%BB/">记录类</a></div>
                                                        <h5><a href="/vscode_extension_two/" class="trm-anima-link">VS Code 插件开发指北 (二)</a></h5>
                                                        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
                                                        <ul class="trm-card-data trm-label">
                                                            <li>06/17</li>
                                                            <li>08:19</li>
                                                            <li>1.3k</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="trm-pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a></div>
                                        <div class="trm-divider trm-mb-40"></div>
                                        <footer class="trm-scroll-animation" data-scroll data-scroll-offset="50">
                                            <div class="trm-label">© 2019 - 2022 · <span class="trm-accent-color">白云苍狗</span></div>
                                            <div class="trm-label">博客已萌萌哒运行: <span id="since" class="trm-accent-color"></span> 天</div>
                                        </footer>
                                        <script>
                                            function show_date_time() {
                                                BirthDay = new Date("11/19/2019 17:00:00"), today = new Date, timeold = today.getTime() - BirthDay.getTime(), msPerDay = 864e5, day = Math.floor(timeold / msPerDay), since.innerHTML = day
                                            }
                                            show_date_time()
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="trm-hidden-switcher">
            <div class="trm-mode-switcher"><i class="far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"> <label class="trm-swich" for="trm-swich"></label> <i class="far fa-moon"></i></div>
        </div>
    </div>
    <script>
        window.TYPED_TEXT = ["Web Developer"]
    </script>
    <script>
        window.FAVICON = {
            icon16: "favicon-16x16.png",
            icon32: "favicon-32x32.png",
            appleTouchIcon: "apple-touch-icon.png",
            webmanifest: "/site.webmanifest",
            visibilitychange: !0,
            hidden: "failure.ico",
            showText: "(/≧▽≦/)咦！又好了！",
            hideText: "(●—●)喔哟，崩溃啦！",
            show_text: "(/≧▽≦/)咦！又好了！",
            hide_text: "(●—●)喔哟，崩溃啦！"
        }
    </script>
    <script>
        window.HTMEM_VERSION = "1.0.1"
    </script>
    <script src="/js/plugins/jquery.min.js"></script>
    <script src="/js/plugins/swup.min.js"></script>
    <script src="/js/plugins/locomotive-scroll.js"></script>
    <script src="/js/plugins/typing.js"></script>
    <script src="/js/plugins/fancybox.min.js"></script>
    <script src="/js/plugins/swiper.min.js"></script>
    <script type="text/javascript" src="//imgcache.qq.com/qcloud/cloudbase-js-sdk/1.7.1/cloudbase.full.js"></script>
    <script type="text/javascript" src="//unpkg.com/b-comments@0.0.12/dist/index.all.min.js"></script>
    <script>
        "serviceWorker" in navigator ? navigator.serviceWorker.register("/sw.js").then((function() {
            navigator.serviceWorker.controller ? console.log("Assets cached by the controlling service worker.") : console.log("Please reload this page to allow the service worker to handle network operations.")
        })).catch((function(e) {
            console.log("ERROR: " + e)
        })) : console.log("Service workers are not supported in the current browser.")
    </script>
    <script src="/js/main.js?v=1.0.1"></script>
</body>

</html>